<template>
  <m-page>
    <template #head>
      <m-navbar :left-arrow="false" bg-color="#FFF" :title="title" />
    </template>
    <template #foot>
      <tabbar value="user" />
    </template>

    <div class="m-page-list">
      <div class="m-demo-auth">
        <ClientOnly>
          <m-authcode v-model:value="code" :length="6" gutter="16px" focused />
        </ClientOnly>
      </div>

      <!-- <van-button type="primary" @click="showCode">获取code</van-button> -->
    </div>
  </m-page>
</template>
<script setup>
import { ref, reactive, watch } from 'vue'

const code = ref([])
const title = ref('列表')

// const showCode = () => {
//   console.log(code.value)
// }
watch(code, (nVal) => {
  const val = nVal.join('')
  if (val.length >= 6) console.log(val)
}, { deep: true })
</script>
<style lang="less" scoped>
.m-page-list {
  padding: 20px 0;

  .m-demo-auth {
    padding: 0 15px;
  }
}
</style>
